<template>
    <div class='login-container'>
        <el-form
            :model='user'
            class='login-form'
            @submit.prevent='submit'
        >
            <div class='title-container'>
                <h3 class='title'>测试</h3>
            </div>
            <el-form-item :error='error.username'>
                <el-input
                    v-model='user.username'
                    prefix-icon='User'
                    name='username'
                    placeholder='用户名'
                    type='text'
                    size='large'
                />
            </el-form-item>
            <el-form-item :error='error.password'>
                <el-input
                    v-model='user.password'
                    prefix-icon='Lock'
                    name='password'
                    placeholder='密码'
                    type='text'
                    size='large'
                    show-password
                />
            </el-form-item>
            <el-button
                :loading='loading'
                type='primary'
                native-type='submit'
                size='large'
            >
                登 录
            </el-button>
        </el-form>
    </div>
</template>

<script lang='ts' setup>
import { reactive, ref } from 'vue'
import { useStore } from '@/store'

const store = useStore()
const user = reactive({
    username: '', password: ''
})
const error = reactive({
    username: '', password: ''
})

const loading = ref(false)
const redirect = ref(undefined)

const submit = async () => {
    if (user.username !== '' && user.password !== '') {
        loading.value = true
        store.commit('setToken', {
            token: 'token'
        })
        window.location.href = window.location.origin
    } else {
        console.log('输入的用户名或密码错误')
    }
}
</script>

<style lang='scss' scoped>
.login-container {
    min-height: 100%;
    background-color: #2d3a4b;
    overflow: hidden;
    height: 100vh;

    .login-form {
        width: 400px;
        padding-top: 160px;
        margin: 0 auto 30px;

        .el-button {
            width: 100%;
            margin-bottom: 60px
        }
    }

    .title-container {
        position: relative;

        .title {
            font-size: 26px;
            color: #eee;
            margin: 0 auto 40px auto;
            text-align: center;
            font-weight: bold;
        }
    }
}
</style>
